<div class="row clearfix" [@SimpleAnimate]="'fadeIn'">
    <div class="col-md-12 column">
        <div class="box-inner">
            <div class="well box-header tool_bar_header" style="padding-top: 5px">
                <button (click)="back()" type="button" class="btn btn-sm btn-default">
                    <i class="glyphicon glyphicon-arrow-left">返回</i>
                </button>
            </div>
            <div class="box-content">
                <div class="container">
                    <div class="row clearfix">
                        <div class="col-md-8 column">
                            <form role="form">
                                <div class="form-group has-feedback" [ngClass]="{'has-error': roleName.invalid, 'has-success': !roleName.invalid}">
                                    <label>角色名</label>
                                    <input #roleName="ngModel" name="role.roleName" [(ngModel)]="role.roleName" class="form-control" placeholder="角色名" type="text"
                                        required>
                                    <span class="glyphicon glyphicon-ok form-control-feedback" *ngIf="!roleName.invalid"></span>
                                    <span class="glyphicon glyphicon-remove form-control-feedback" *ngIf="roleName.invalid"></span>
                                </div>
                                <div class="form-group">
                                    <label>描述</label>
                                    <input name="role.description" [(ngModel)]="role.description" class="form-control" placeholder="描述" type="text">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-8 column" *ngIf="items.length > 0">
                            <label>角色权限</label>
                            <div class="box-inner">
                                <div class="box-content">
                                    <div class="container">
                                        <div class="row clearfix">
                                            <div class="col-md-8 column">
                                                <ngx-treeview [config]="config" [items]="items" (selectedChange)="onSelectedChange($event)"></ngx-treeview>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8 column">
                            <hr>
                            <button type="button" (click)="save()" class="btn btn-success" [ngClass]="{'disabled': roleName.invalid}">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>